<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.ok{
				color: green;
			}
			.error{
				color: red;
			}
		</style>
		<script type="text/javascript">
			function checkName() {
				var name = document.getElementById("name").value;
				var span = document.getElementById("nameMsg");
				var reg = /^\w{5,10}$/;
				if (name.match(reg)) {
					span.className = "ok";
				} else {
					span.className = "error";
					//js正则表达式验证非法，就直接返回，不需要验证ajax验证用户名是否重名
					return;
				}
				
				//ajax请求验证这个用户名
				$.post(
					"${pageContext.request.contextPath}/student?method=checkName",
					{"name":name},
					function(data) {
						//{"isExist":isExist}
						if (data.isExist){
							mylayer.errorMsg("改用户已经存在");
							$("#nameExistMsg").html("该用户已经存在");
							$("#nameExistMsg").css("color", "red");
						} else {
							mylayer.success("改用可以使用存在");
							$("#nameExistMsg").html("该用户名可以使用");
							$("#nameExistMsg").css("color", "green");
						}
					},
					"json"
				);
			}
			
			function checkEmail() {
				var emial = document.getElementById("email").value;
				var span = document.getElementById("emailMsg");
				// 63468gdf@gmail.com.cn
				var reg = /^[a-zA-Z0-9_-]+@\w+(\.[a-zA-Z0-9]+)+$/;
				if (emial.match(reg)) {
					span.className = "ok";
				} else {
					span.className = "error";
				}
			}
		</script>
	</head>
	<body>
		名字： <input type="text" id="name" onblur="checkName()" />
		<span id="nameMsg">5-10位字母、数字、下划线</span>
		<span id="nameExistMsg"></span>
		<br/>
		邮箱： <input type="text" id="email" onblur="checkEmail()" />
		<span id="emailMsg">必须符合邮箱的格式</span>
		
		<script src="${pageContext.request.contextPath}/lib/jquery/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="${pageContext.request.contextPath}/lib/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="${pageContext.request.contextPath}/js/mylayer.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
